<template>
  <Loading :loading="loading">
    <div class="content">
      <NavBar>
        <template slot="content">
          <div>修改密码</div>
        </template>
      </NavBar>
      <van-form>
        <div class="password">
          <!-- <div v-show="loginPwdFlag == 'Y'">
            <div class="old">
              <div class="left">当前密码</div>
              <div class="right">
                <van-field
                  v-model="oldPassword"
                  :type="checked ? 'text' : 'password'"
                  input-align="right"
                  clearable
                  @blur="checkOldPassword"
                />
              </div>
            </div>
            <div class="line"></div>
          </div> -->
          <div class="old">
            <div class="left">输入新密码</div>
            <div class="right">
              <van-field
                v-model="newPassword"
                :type="checked ? 'text' : 'password'"
                input-align="right"
                clearable
                @blur="checkNewPassword"
              />
            </div>
          </div>
          <div class="line"></div>
          <div class="old">
            <div class="left">确认新密码</div>
            <div class="right">
              <van-field
                v-model="enterPassword"
                :type="checked ? 'text' : 'password'"
                input-align="right"
                clearable
                @blur="checkEnterPassword"
              />
            </div>
          </div>
        </div>
        <div class="passwordShow">
          <van-checkbox v-model="checked">密码可见</van-checkbox>
        </div>
        <div class="dec">
          为了保障您的交易安全，密码需要设定为8~20位，必须包含大、小写字母和数字
        </div>
        <div>
          <van-button
            type="primary"
            class="button"
            block
            :disabled="
              this.newPassword == '' ||
              this.enterPassword == '' ||
              this.newPassword !== this.enterPassword ||
              !/^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{8,20}$/.test(this.newPassword) ||
              !/^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{8,20}$/.test(this.enterPassword)
            "
            @click="hundlejump"
          >
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </Loading>
</template>
<script>
import API from '@/services/h5/my'
import { Notify } from 'vant'
import NavBar from '@/components/h5header'
import Loading from '@/components/data-loading'

export default {
  components: { NavBar, Loading },
  data() {
    return {
      oldPassword: '',
      newPassword: '',
      enterPassword: '',
      password: 'password',
      checked: false,
      loginPwdFlag: '',
      loading: false
      // disabled: true
    }
  },
  // watch: {
  //   loginPwdFlag: function (val) {
  //     console.log('dddd', val)
  //     if (
  //       val == 'N' &&
  //       this.oldPassword !== '' &&
  //       this.newPassword !== '' &&
  //       this.enterPassword !== '' &&
  //       this.oldPassword !== this.newPassword &&
  //       this.newPassword == this.enterPassword &&
  //       /^[0-9a-zA-Z]{8,20}$/.test(this.oldPassword) &&
  //       /^[0-9a-zA-Z]{8,20}$/.test(this.newPassword) &&
  //       /^[0-9a-zA-Z]{8,20}$/.test(this.enterPassword)
  //     ) {
  //       this.disabled = false
  //     } else if (
  //       val == 'Y' &&
  //       this.newPassword !== '' &&
  //       this.enterPassword !== '' &&
  //       this.newPassword == this.enterPassword &&
  //       /^[0-9a-zA-Z]{8,20}$/.test(this.newPassword) &&
  //       /^[0-9a-zA-Z]{8,20}$/.test(this.enterPassword)
  //     ) {
  //       this.disabled = false
  //     }
  //   }
  // },
  // computed: {
  //   disabled() {
  //     let flag = true
  // if (this.loginPwdFlag == 'N') {
  //   flag =
  //     this.newPassword !== '' &&
  //     this.enterPassword !== '' &&
  //     this.newPassword == this.enterPassword &&
  //     /^[0-9a-zA-Z]{8,20}$/.test(this.newPassword) &&
  //     /^[0-9a-zA-Z]{8,20}$/.test(this.enterPassword)
  // } else {
  //   flag =
  //     this.oldPassword !== '' &&
  //     this.newPassword !== '' &&
  //     this.enterPassword !== '' &&
  //     this.oldPassword !== this.newPassword &&
  //     this.newPassword == this.enterPassword &&
  //     /^[0-9a-zA-Z]{8,20}$/.test(this.oldPassword) &&
  //     /^[0-9a-zA-Z]{8,20}$/.test(this.newPassword) &&
  //     /^[0-9a-zA-Z]{8,20}$/.test(this.enterPassword)
  // }
  //     if (
  //       (flag =
  //         this.newPassword !== '' &&
  //         this.enterPassword !== '' &&
  //         this.newPassword == this.enterPassword &&
  //         /^[0-9a-zA-Z]{8,20}$/.test(this.newPassword) &&
  //         /^[0-9a-zA-Z]{8,20}$/.test(this.enterPassword))
  //     ) {
  //       return !flag
  //     }
  //   }
  // },
  methods: {
    // checkOldPassword() {
    //   if (
    //     this.oldPassword !== '' &&
    //     !/^[0-9a-zA-Z]{8,20}$/.test(this.oldPassword)
    //   ) {
    //     Notify({
    //       type: 'warning',
    //       message: '密码必须为8-20位英文、数字或英文数字的组合'
    //     })
    //   }
    // },
    checkNewPassword() {
      if (
        this.newPassword !== '' &&
        !/^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{8,20}$/.test(this.newPassword)
      ) {
        Notify({
          type: 'warning',
          message: '密码必须为8-20位,必须包含大、小写字母和数字'
        })
      }
      // if (this.newPassword !== '' && this.oldPassword == this.newPassword) {
      //   Notify({ type: 'warning', message: '新密码与旧密码不能一致' })
      // }
    },
    checkEnterPassword() {
      if (
        this.enterPassword !== '' &&
        !/^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{8,20}$/.test(this.enterPassword)
      ) {
        Notify({
          type: 'warning',
          message: '密码必须为8-20位,必须包含大、小写字母和数字'
        })
      }
      if (
        this.enterPassword !== '' &&
        this.newPassword !== this.enterPassword
      ) {
        Notify({ type: 'warning', message: '确认密码与新密码不一致' })
      }
    },
    // getPassword() {
    //   let params = {
    //     password: this.newPassword,
    //     rePassword: this.enterPassword
    //   }
    //   API.password(params).then()
    // },
    // getRePassword() {
    //   let params = {
    //     oldPassword: this.oldPassword,
    //     password: this.newPassword,
    //     rePassword: this.enterPassword
    //   }
    //   API.rePassword(params).then()
    // },
    getPersonal() {
      this.loading = true
      API.personal().then(res => {
        if (res.data && res.data.code === 1000) {
          this.loginPwdFlag = res.data.data.loginPwdFlag
        }
        this.loading = false
      })
    },
    hundlejump() {
      //判断是否是首次登录,调用不同接口
      // if (this.loginPwdFlag == 'N') {
      let params = {
        password: this.newPassword,
        rePassword: this.enterPassword
      }
      API.password(params).then(res => {
        if (res.data && res.data.code === 1000) {
          Notify({ type: 'success', message: '密码修改成功' })
          this.$router.push({ path: '/login' })
        }
      })
      // } else {
      //   let params = {
      //     oldPassword: this.oldPassword,
      //     password: this.newPassword,
      //     rePassword: this.enterPassword
      //   }
      //   API.rePassword(params).then(res => {
      //     if (res.data && res.data.code === 1000) {
      //       Notify({ type: 'success', message: '密码修改成功' })
      //       this.$router.push({ path: '/login' })
      //     }
      //   })
      // }
    }
  },
  mounted() {
    this.getPersonal()
  }
}
</script>
<style scoped lang="less">
.content {
  background: #fafafa;
  height: calc(100vh);
  .password {
    width: 375px;
    background-color: #fff;
    margin-top: 13px;
    box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.01);
    .old {
      padding: 0 15px;
      width: 345px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        width: 80px;
        font-size: 15px;
        color: #333;
      }
      .right {
        // width: 50%;
        // height: 100%;
        font-size: 15px;
        color: #333;
        flex: 1;
      }
    }
    .line {
      width: 345px;
      height: 0.5px;
      background-color: #f0f0f0;
      margin: 1px auto;
    }
  }
  .passwordShow {
    width: 345px;
    font-size: 13.5px;
    padding: 15px 15px 0 15px;
  }
  .dec {
    width: 345px;
    font-size: 13px;
    color: #999;
    padding: 15px;
  }
  .button {
    width: 345px;
    height: 50px;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 4.5px;
  }
}
</style>